﻿@using RuoVea.ExUtil
@{
    Layout = "_Layout";
    ViewData["Title"] = "日报";
}

<el-calendar :range="rangeDate" v-model="currentDate">
    <template slot="dateCell" slot-scope="{date, data}">
        <div @@click="handleClick(data.day)" style="height:100%;">
            <span :class="{'has-report':  hasReport(data.day)}"> {{ data.day }} </span>
            <div v-if="getReportContent(data.day)" class="report-indicator">
                <el-popover placement="top-start" width="100%" trigger="hover">
                    <div v-html="getReportContent(data.day)" style="white-space: pre-wrap;max-width:480px;"></div>
                    <div slot="reference" size="mini">已填写</div>
                </el-popover>
            </div>
        </div>
    </template>
</el-calendar>

<el-dialog :visible.sync="dialogVisible" title="填写日报">
    <el-input v-model="currentReportContent"
              type="textarea"
              :rows="4"
              placeholder="请输入日报内容">
    </el-input>
    <span slot="footer" class="dialog-footer">
        <el-button @@click="dialogVisible = false" size="mini">取消</el-button>
        <el-button type="primary" @@click="submitReport" size="mini">提交</el-button>
    </span>
</el-dialog>

@section Scripts {
    <script>
        new Vue({
            el: '#main',
            data() {
                return {
                    currentDate: new Date(),
                    rangeDate: [],
                    reportData: [],
                    dialogVisible: false,
                    currentReportDate: '',
                    currentReportContent: '',
                };
            },
            created() {
                this.cellRangeDate();
                this.handleLoadData();
            },
            watch: {
                currentDate: {
                    handler(newVal, objVal) {
                        if (newVal) {
                            this.currentDate = newVal;
                            this.cellRangeDate();
                            this.handleLoadData();
                        }
                    },
                }
            },
            methods: {
                cellRangeDate() {
                    let dateBefore = new Date(this.currentDate);
                    let dateAfter = new Date(this.currentDate);
                    dateBefore.setDate(dateBefore.getDate() - 25);
                    dateAfter.setDate(dateAfter.getDate() + 25);
                    this.rangeDate = [this.formatDate(dateBefore), this.formatDate(dateAfter)];
                },
                formatDate(date) {
                    let year = date.getFullYear();
                    let month = (date.getMonth() + 1).toString().padStart(2, '0');
                    let day = date.getDate().toString().padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                handleLoadData() {
                    let curry = { pageNo: 1, pageSize: 31 };
                    const [BeginTime, EndTime] = this.rangeDate;
                    var data = { ...curry, ...{ BeginTime }, ...{ EndTime }};
                    this.$http.post("/daily/pages", data, {async:false}).then((res) => {
                        this.reportData = res.rows.map(x => ({id: x.id,day: x.days,content: x.content}));
                    });
                }, 
                hasReport(day) {
                    return this.reportData.some(entry => entry.day === day && entry.content);
                },
                getReportContent(day) {
                    const entry = this.reportData.find(entry => entry.day === day);
                    return entry ? entry.content : '';
                }, 
                getReportId(day) {
                    const entry = this.reportData.find(entry => entry.day === day);
                    return entry ? entry.id : 0;
                },
                handleClick(day) {
                    const reportEntry = this.reportData.find(entry => entry.day === day);
                    this.currentReportDate = reportEntry ? reportEntry.day : day;
                    this.currentReportContent = reportEntry ? reportEntry.content : '';
                    this.dialogVisible = true;
                },
                submitReport() {
                    this.reportData[this.currentReportDate] = this.currentReportContent;
                    this.dialogVisible = false;
                    var data = { id: this.getReportId(this.currentReportDate), Day: this.currentReportDate, Content: this.currentReportContent };
                    this.$http.post("/daily/submit", data).then((res) => {
                        if (res) {
                            this.$message({ message: "提交成功.", center: true, type: 'success' });
                            this.handleLoadData();
                            this.dialogVisible = false;
                        }
                    });
                },
            },
        });
    </script>
}